<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="copyright" content="留学网">
<meta name="author" content="留学网">
<title>留学网</title>
<link rel="stylesheet" href="./static/css/element-ui.css">
<script src="./static/js/basic.js"></script>
<script type="text/javascript" src="./static/js/swiper-4.5.3.min.js"></script>
<link rel="stylesheet" href="./swiper/swiper.min.css" />
<script src="./static/js/element-ui.js"></script>
<script src="./static/js/js.js"></script>
<script src="./static/js/component.js"></script>
</head>

<body>
  <div v-cloak class="main zxb-home" id="app">
    <layout>
      
      <div v-if="info" class="order-detail">
        <div class="header">
          <div class="p1">订单号：{{info.sn}}</div>
          <div class="status">{{info.status_text}}</div>
        </div>
        <div v-for="(item, index) in info.orders_item" :key="item.id" :class="'b'+index" class="top">
          <div class="imgW"><img :src="item.product_image" alt="" class="img"></div>
          <div class="div">
            <div class="name">{{item.product_name}}</div>
            <div class="price">￥{{item.price}} X {{item.number}}</div>
            <div class="total_price">￥{{item.total_price}}</div>
          </div>
        </div>
        <dl class="bottom">
          <dd class="item">
            <span class="lab">支付时间</span>
            <span class="con">{{info.pay_time_text || '2021-02-03 00:01:02'}}</span>
          </dd>
          <dd class="item">
            <span class="lab">店铺</span>
            <span class="con">{{info.store_info.store_name}}</span>
          </dd>
          <dd class="item">
            <span class="lab">总量</span>
            <span class="con">{{info.total_number}}</span>
          </dd>
          <dd class="item">
            <span class="lab">总价</span>
            <span class="con">{{info.total_price}}</span>
          </dd>
        </dl>
      </div>
    </layout>
  </div>
  
  
  <script type="text/babel">
    var time = new Date().getTime()
    new Vue({
      el: '#app',
      data:{
        info:null
        
      },
      created() {
          
        // jump()
      },
      mounted() {
        this.getList()
      },
      methods: {
        
        getList(){
          ordersDetailApi({orders_id: getId('id')}, res=>{
            this.info = res;
          })
        },
        
        
      }
    })
  </script>
  
  <style>
    .footer{display: none;}
    body{background-color: #f5f5f5;}
  </style>
  
</body>
</html>